<template>
  <van-cell-group>
    <van-cell title="优惠券" />
    <div class="cell-group">
      <div class="cell-group-item" v-for="item in couponList" :key="item.id">
        <div class="coupon-info">
          <div class="coupon-price">¥ {{ item.discount }}</div>
          <div class="coupon-type">{{ item.name }}</div>
        </div>

        <div class="coupon-desc">
          {{ item.desc }}-{{ item.tag }}有效期：{{ item.days }} 天
        </div>
      </div>
    </div>
  </van-cell-group>
</template>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
  couponList: {
    type: Array,
    default: () => [],
  },
});
</script>

<style scoped lang="scss">
.cell-group {
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cell-group-item {
  padding: 10px; /* 按需调整内边距，原 30px 可能过大 */
  border: 1px solid red; /* 调整边框宽度，原 4px 视觉上可能粗了，按需改 */
  border-radius: 4px; /* 可选，让边框更圆润 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 150px;
}
.coupon-info{
  display: flex;
}
.coupon-price {
  font-size: 60px;
  color: red;
  font-weight: bold;
  margin-bottom: 4px;
  padding: 20px 40px;
}
.coupon-type {
  line-height: 100px;
  font-size: 50px;
  color: #333;
}
.coupon-desc {
  padding: 10px 40px;
  font-size: 28px;
  color: #999;
}
</style>
